<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	
	//jquery 시작
	$(document).ready(function(){
		var pagingSerialNo;
		var pagingWorkOrderId;
		var pagingOperationId;
		var pagingDefectId;
		var pageNumber;
		var priviousPageGroup;
		var nextPageGroup;
		$("#serial_no_search").hide();
		$("#work_order_search").hide();
		$("#defect_search").hide();
		$("#searchSerial").click(function(){
			$("#serial_no_search").show();
			$("#work_order_search").hide();
			$("#defect_search").hide();
		});
		$("#searchWorkOrder").click(function(){
			$("#serial_no_search").hide();
			$("#defect_search").hide();
			$("#work_order_search").show();
		});
		$("#searchDefect").click(function(){
			$("#serial_no_search").hide();
			$("#work_order_search").hide();
			$("#defect_search").show();
		});
		
		//검색 인풋박스 엔터시 폼에걸려 빈값으로 넘어가서 404사 뜨는 문제 해결을 위해 엔터시 클릭이벤트로 넘어가게 한다
		$('#searchInfo_serial').keypress(function(ev){
			if (ev.which === 13){
				$('#searchBtn_serial').click();
			    return false;
			}
		});
		$('#searchInfo_workOrder').keypress(function(ev){
		    if (ev.which === 13){
		        $('#searchBtn_workOrder').click();
		    	return false;
		    }
		});
		$('#searchInfo_defect').keypress(function(ev){
		    if (ev.which === 13){
		        $('#searchBtn_defect').click();
		    	return false;
		    }
		});

		//시리얼로 검색시 검색버튼 클릭했을때(ajax로 구현)
		$("#searchBtn_serial").click(function(){
			if($("#serial_no").val()==""){
				alert("SERIAL_NO를 입력하세요!");
				$("#serial_no").focus();
				return false;
			};
			alert("검색완료!");
			$.ajax({
				url:"history.do?command=searchSerialList",
				data:$("#searchInfo_serial").serialize(),
				dataType:"json",
				success:function(js){
					if(js.msg=="N"){
						alert("해당 데이터가 없습니다!");
						return false;
					}
					var tbody="";
					$.each(js.lvo.list,function(index,value){
						tbody+="<tr><td>"+value.HISTORY_ID+"</td><td>"+value.MEM_ID+"</td><td>"+value.WORK_ORDER_ID+"</td><td>"+value.QUANTITY+"</td><td>"+value.SERIAL_NO+"</td><td>"+value.OPERATION_ID+"</td><td>"+value.DEFECT_ID+"</td><td>"+value.DATE_TIME+"</td></tr>";
					});
					pagingSerialNo =js.lvo.list[0].SERIAL_NO;
					var page="";
					priviousPageGroup=js.lvo.pagingBean.startPageOfPageGroup-1;
					if(js.lvo.pagingBean.previousPageGroup){
						page+="<a href='#' class='pageClick1'>"+priviousPageGroup+"</a>";
					}
					page+="&nbsp;&nbsp;";
					for(i=js.lvo.pagingBean.startPageOfPageGroup;i<=js.lvo.pagingBean.endPageOfPageGroup;i++){
						if(js.lvo.pagingBean.nowPage!=i) {
							page+="<a href='#'class='pageClick1'> "+i+" </a>";
						}else{
							page+=" <u>"+i+"</u> ";
						}
					}
					page+="&nbsp;&nbsp;";
					nextPageGroup=js.lvo.pagingBean.endPageOfPageGroup+1;
					if(js.lvo.pagingBean.nextPageGroup)
						page+="<a href='#'class='pageClick1'>"+nextPageGroup+"</a>";
					$("#historyListBody").html(tbody);
					$("#mainPageDiv").html(page);
				},
				error:function(){
					alert("error!");
				}
			});//ajax
		});//click
		
		//시리얼로 검색후 페이징을 위해 이벤트를 한번더 걸어주고 이 이벤트 안에서 계속 페이징 처리해준다(jquery에서 <a href>가 먹으면 다음페이지를 못가져가므로 화살표 그림대신 숫자로 표현해준다)
		$("#mainPageDiv").on('click','.pageClick1',function(){
			var pageNo2 = $(this).text();
			$.ajax({
				url:"history.do?command=searchSerialList&pageNo="+pageNo2+"&serial_no="+pagingSerialNo,
				dataType:"json",
				success:function(js){
					if(js.msg=="N"){
						alert("해당 데이터가 없습니다!");
						return false;
					}
					var tbody="";
					$.each(js.lvo.list,function(index,value){
						tbody+="<tr><td>"+value.HISTORY_ID+"</td><td>"+value.MEM_ID+"</td><td>"+value.WORK_ORDER_ID+"</td><td>"+value.QUANTITY+"</td><td>"+value.SERIAL_NO+"</td><td>"+value.OPERATION_ID+"</td><td>"+value.DEFECT_ID+"</td><td>"+value.DATE_TIME+"</td></tr>";
					});
					var page="";
					priviousPageGroup=js.lvo.pagingBean.startPageOfPageGroup-1;
					if(js.lvo.pagingBean.previousPageGroup){
						page+="<a href='#'class='pageClick1'>"+priviousPageGroup+"</a>";
					}
					page+="&nbsp;&nbsp;";
					for(i=js.lvo.pagingBean.startPageOfPageGroup;i<=js.lvo.pagingBean.endPageOfPageGroup;i++){
						if(js.lvo.pagingBean.nowPage!=i) {
							page+="<a href='#'class='pageClick1'>"+i+"</a>";
						}
						else{
							page+=" <u>"+i+"</u> ";
						}
					}
					page+="&nbsp;&nbsp;";
					nextPageGroup=js.lvo.pagingBean.endPageOfPageGroup+1;
					if(js.lvo.pagingBean.nextPageGroup)
						page+="<a href='#'class='pageClick1'>"+nextPageGroup+"</a>";
					$("#historyListBody").html(tbody);
					$("#mainPageDiv").html(page);
				},
				error:function(){
					alert("error!");
				}
			}); // page ajax
		}); // page click
		
		//워크오더로 검색시 검색버튼 클릭했을때(ajax로 구현)
		$("#searchBtn_workOrder").click(function(){
			if($("#work_order_id").val()==""){
				alert("WORK_ORDER_ID를 입력하세요!");
				$("#work_order_id").focus();
				return false;
			}else if($("#wo_operation_id").val()==""){
				alert("OPERATION_ID를 선택하세요");
				return false;
			}else if($("#wo_defect_id").val()==""){
				alert("DEFECT_ID를 선택하세요");
				return false; 
			};
			$.ajax({
				url:"history.do?command=searchWorkOderList",
				data:$("#searchInfo_workOrder").serialize(),
				dataType:"json",
				success:function(js){
					if(js.msg=="N"){
						alert("해당 데이터가 없습니다!");
						return false;
					}
					alert("검색완료!");
					var tbody="";
					$.each(js.map.lvo.list,function(index,value){
						tbody+="<tr><td>"+value.HISTORY_ID+"</td><td>"+value.MEM_ID+"</td><td>"+value.WORK_ORDER_ID+"</td><td>"+value.QUANTITY+"</td><td>"+value.SERIAL_NO+"</td><td>"+value.OPERATION_ID+"</td><td>"+value.DEFECT_ID+"</td><td>"+value.DATE_TIME+"</td></tr>";
					});
					pagingWorkOrderId =js.map.lvo.list[0].WORK_ORDER_ID;
					pagingOperationId=js.map.lvo.list[0].OPERATION_ID;
					pagingDefectId=js.map.lvo.list[0].DEFECT_ID;
					var page="";
					priviousPageGroup=js.map.lvo.pagingBean.startPageOfPageGroup-1;
					if(js.map.lvo.pagingBean.previousPageGroup){
						page+="<a href='#' class='pageClick2'>"+priviousPageGroup+"</a>";
					}
					page+="&nbsp;&nbsp;";
					for(i=js.map.lvo.pagingBean.startPageOfPageGroup;i<=js.map.lvo.pagingBean.endPageOfPageGroup;i++){
						if(js.map.lvo.pagingBean.nowPage!=i) {
							page+="<a href='#'class='pageClick2'> "+i+" </a>";
						}else{
							page+=" <u>"+i+"</u> ";
						}
					}
					page+="&nbsp;&nbsp;";
					nextPageGroup=js.map.lvo.pagingBean.endPageOfPageGroup+1;
					if(js.map.lvo.pagingBean.nextPageGroup)
						page+="<a href='#'class='pageClick2'>"+nextPageGroup+"</a>";
					$("#historyListBody").html(tbody);
					$("#mainPageDiv").html(page);
				},
				error:function(){
					alert("error!");
				}
			});//ajax
		});//click
		
		//워크오더로 검색후 페이징을 위해 이벤트를 한번더 걸어주고 이 이벤트 안에서 계속 페이징 처리해준다(jquery에서 <a href>가 먹으면 다음페이지를 못가져가므로 화살표 그림대신 숫자로 표현해준다)
		$("#mainPageDiv").on('click','.pageClick2',function(){
			var pageNo2 = $(this).text();
			$.ajax({
				url:"history.do?command=searchWorkOderList&pageNo="+pageNo2+"&work_order_id="+pagingWorkOrderId+"&operation_id="+pagingOperationId+"&defect_id="+pagingDefectId,
				dataType:"json",
				success:function(js){
					if(js.msg=="N"){
						alert("해당 데이터가 없습니다!");
						return false;
					}
					var tbody="";
					$.each(js.map.lvo.list,function(index,value){
						tbody+="<tr><td>"+value.HISTORY_ID+"</td><td>"+value.MEM_ID+"</td><td>"+value.WORK_ORDER_ID+"</td><td>"+value.QUANTITY+"</td><td>"+value.SERIAL_NO+"</td><td>"+value.OPERATION_ID+"</td><td>"+value.DEFECT_ID+"</td><td>"+value.DATE_TIME+"</td></tr>";
					});
					var page="";
					priviousPageGroup=js.map.lvo.pagingBean.startPageOfPageGroup-1;
					if(js.map.lvo.pagingBean.previousPageGroup){
						page+="<a href='#'class='pageClick2'>"+priviousPageGroup+"</a>";
					}
					page+="&nbsp;&nbsp;";
					for(i=js.map.lvo.pagingBean.startPageOfPageGroup;i<=js.map.lvo.pagingBean.endPageOfPageGroup;i++){
						if(js.map.lvo.pagingBean.nowPage!=i) {
							page+="<a href='#'class='pageClick2'>"+i+"</a>";
						}
						else{
							page+=" <u>"+i+"</u> ";
						}
					}
					page+="&nbsp;&nbsp;";
					nextPageGroup=js.map.lvo.pagingBean.endPageOfPageGroup+1;
					if(js.map.lvo.pagingBean.nextPageGroup)
						page+="<a href='#'class='pageClick2'>"+nextPageGroup+"</a>";
					$("#historyListBody").html(tbody);
					$("#mainPageDiv").html(page);
				},
				error:function(){
					alert("error!");
				}
			}); // page ajax
		}); // page click
		
		//디펙트로 검색시 검색버튼 클릭했을때(ajax로 구현)
		$("#searchBtn_defect").click(function(){
			if($("#defect").val()==""){
				alert("DEFECT_ID를 선택하세요!");
				return false;
			};
			alert("검색완료!");
			$.ajax({
				url:"history.do?command=searchDefectList",
				data:$("#searchInfo_defect").serialize(),
				dataType:"json",
				success:function(js){
					if(js.msg=="N"){
						alert("해당 데이터가 없습니다!");
						return false;
					}
					var tbody="";
					$.each(js.map.lvo.list,function(index,value){
						tbody+="<tr><td>"+value.HISTORY_ID+"</td><td>"+value.MEM_ID+"</td><td>"+value.WORK_ORDER_ID+"</td><td>"+value.QUANTITY+"</td><td>"+value.SERIAL_NO+"</td><td>"+value.OPERATION_ID+"</td><td>"+value.DEFECT_ID+"</td><td>"+value.DATE_TIME+"</td></tr>";
					});
					pagingDefect =js.map.lvo.list[0].DEFECT_ID; 
					var page="";
					priviousPageGroup=js.map.lvo.pagingBean.startPageOfPageGroup-1;
					if(js.map.lvo.pagingBean.previousPageGroup){
						page+="<a href='#'class='pageClick3'>"+priviousPageGroup+"</a>";
					}
					page+="&nbsp;&nbsp;";
					for(i=js.map.lvo.pagingBean.startPageOfPageGroup;i<=js.map.lvo.pagingBean.endPageOfPageGroup;i++){
						if(js.map.lvo.pagingBean.nowPage!=i) {
							page+="<a href='#'class='pageClick3'>"+i+"</a>";
						}
						else{
							page+=" <u>"+i+"</u> ";
						}
					}
					page+="&nbsp;&nbsp;";
					nextPageGroup=js.map.lvo.pagingBean.endPageOfPageGroup+1;
					if(js.map.lvo.pagingBean.nextPageGroup)
						page+="<a href='#'class='pageClick3'>"+nextPageGroup+"</a>";
					$("#historyListBody").html(tbody);
					$("#mainPageDiv").html(page);
				},
				error:function(){
					alert("error!");
				}
			});//ajax
		});//click
		
		//디펙트로 검색후 페이징을 위해 이벤트를 한번더 걸어주고 이 이벤트 안에서 계속 페이징 처리해준다(jquery에서 <a href>가 먹으면 다음페이지를 못가져가므로 화살표 그림대신 숫자로 표현해준다)
		$("#mainPageDiv").on('click','.pageClick3',function(){
			var pageNo2 = $(this).text();
			$.ajax({
				url:"history.do?command=searchDefectList&pageNo="+pageNo2+"&defect_id="+pagingDefect,
				dataType:"json",
				success:function(js){
					if(js.msg=="N"){
						alert("해당 데이터가 없습니다!");
						return false;
					}
					var tbody="";
					$.each(js.map.lvo.list,function(index,value){
						tbody+="<tr><td>"+value.HISTORY_ID+"</td><td>"+value.MEM_ID+"</td><td>"+value.WORK_ORDER_ID+"</td><td>"+value.QUANTITY+"</td><td>"+value.SERIAL_NO+"</td><td>"+value.OPERATION_ID+"</td><td>"+value.DEFECT_ID+"</td><td>"+value.DATE_TIME+"</td></tr>";
					});
					var page="";
					priviousPageGroup=js.map.lvo.pagingBean.startPageOfPageGroup-1;
					if(js.map.lvo.pagingBean.previousPageGroup){
						page+="<a href='#'class='pageClick3'>"+priviousPageGroup+"</a>";
					}
					page+="&nbsp;&nbsp;";
					for(i=js.map.lvo.pagingBean.startPageOfPageGroup;i<=js.map.lvo.pagingBean.endPageOfPageGroup;i++){
						if(js.map.lvo.pagingBean.nowPage!=i) {
							page+="<a href='#'class='pageClick3'>"+i+"</a>";
						}
						else{
							page+=" <u>"+i+"</u> ";
						}
					}
					page+="&nbsp;&nbsp;";
					nextPageGroup=js.map.lvo.pagingBean.endPageOfPageGroup+1;
					if(js.map.lvo.pagingBean.nextPageGroup)
						page+="<a href='#'class='pageClick3'>"+nextPageGroup+"</a>";
					$("#historyListBody").html(tbody);
					$("#mainPageDiv").html(page);
				}, 
				error:function(){
					alert("error!");
				}
			}); // page ajax
		}); // page click 
	});

	
</script>

<!-- 히스토리 검색 -->
<p class="title" >History Search</p>
<input type="button" id="searchSerial" value="serial_no 검색">
<input type="button" id="searchWorkOrder" value="work_order_id 검색">
<input type="button" id="searchDefect" value="defect_id 검색">

<br><br>
<!-- 히스토리 serial_no별 검색 -->
<div id="serial_no_search">
<form id="searchInfo_serial">
	<table border=1 cellspacing='0'>
		<tr>
			<td>SERIAL_NO</td>
			<td rowspan=2><input type="button" id="searchBtn_serial" value="검색" style="height: 40px; width: 66px"></td>
		</tr>
		<tr>
			<td><input type="text" id="serial_no" name="serial_no" placeholder="serial_no" ></td>
		</tr>
	</table>
</form>
</div>

<!-- 히스토리 work_order별 검색 -->
<span id="work_order_search">
<form id="searchInfo_workOrder">
	<table border=1 cellspacing='0'>
		<tr>
			<td>WORK_ORDER_ID</td>
			<td>OPERATION_ID</td>
			<td>DEFECT_ID</td>
			<td rowspan=2><input type="button" id="searchBtn_workOrder" value="검색" style="height: 40px; width: 66px"></td>
		</tr>
		<tr>
			<td><input type="text" id="work_order_id" name="work_order_id" placeholder="work_order_id" ></td>
			<td>
				<select name="operation_id" id="wo_operation_id">
					<option value="">-----</option>				
					<option value="COMPLETE">COMPLETE</option>
					<option value="END">END</option>
					<option value="OPICE">OPICE</option>
					<option value="OPPCK">OPPCK</option>
					<option value="OPRB">OPRB</option>
					<option value="OPTP">OPTP</option>
					<option value="ORDER">ORDER</option>
					<option value="START">START</option>
				</select>
			</td>
			<td>
				<select name="defect_id" id="wo_defect_id">
					<option value="">-----</option>
					<option value="DEFAULT">DEFAULT</option>
					<option value="DFP">DEP</option>
					<option value="DFW">DEW</option>
					<option value="PASS">PASS</option>
				</select>
			</td>
		</tr>
	</table>
</form>
</span>

<!-- 히스토리 디펙트별 검색 -->
<div id="defect_search">
<form id="searchInfo_defect">
	<table border=1 cellspacing='0'>
		<tr>
			<td>DEFECT_ID</td>
			<td rowspan=2><input type="button" id="searchBtn_defect" value="검색" style="height: 40px; width: 66px"></td>
		</tr>
		<tr>
			<td>
				<select name="defect_id" id="defect">
					<option value="">-----</option>
					<option value="DEFAULT">DEFAULT</option>
					<option value="DFP">DEP</option>
					<option value="DFW">DEW</option>
					<option value="PASS">PASS</option>
				</select>
			</td>
		</tr>
	</table>
</form>
</div>

<!-- 히스토리 검색 결과 -->
<div id="searchResult">
<br><hr><p class="title" >History List</p>
<table border=1 cellspacing='0' width="800px">
	<tr>
		<td>NO</td>
		<td>ID</td>
		<td>WORK_ORDER_ID</td>
		<td>QUANTITY</td>
		<td>SERIAL_NO</td>
		<td>OPERATION_ID</td>
		<td>DEFECT_ID</td>
		<td>DATE</td>
	</tr>
	<tbody id="historyListBody">
		<c:forEach var="list" items="${requestScope.map.lvo.list}">
		<tr>
			<td>${list.HISTORY_ID }</td>
			<td>${list.MEM_ID }</td>
			<td>${list.WORK_ORDER_ID }</td>
			<td>${list.QUANTITY }</td>
			<td>${list.SERIAL_NO }</td>
			<td>${list.OPERATION_ID }</td>
			<td>${list.DEFECT_ID }</td>
			<td>${list.DATE_TIME }</td> 
		</tr>
		</c:forEach>
	</tbody>
</table>

<!-- 페이지관련하기! -->
<!-- 이전 페이지 그룹이 있으면 이미지 보여주고
	이미지 링크는 현 페이지 그룹 시작페이지 번호 - 1 
	이전 페이지 그룹의 마지막 페이지 번호로 해야하지만 위 ajax와 통일성을 위해 숫자로서 표현해 주었다 -->
<div id="mainPageDiv">
 <c:if test="${requestScope.map.lvo.pagingBean.previousPageGroup}">
	 <a href="${pageContext.request.contextPath }/history.do?command=main&pageNo=${requestScope.map.lvo.pagingBean.startPageOfPageGroup-1}">
	 ${requestScope.map.lvo.pagingBean.startPageOfPageGroup-1}</a>
</c:if>
	 &nbsp;&nbsp;

<!-- PagingBean 을 이용해서 현재 페이지에 해당되는 페이지그룹의
	시작페이지~~마지막페이지까지 화면에 보여준다.
	이 때 현재 페이지를 제외한 나머지 페이지는 링크를 걸어
	해당 페이지에 대한 게시물 리스트 조회가 가능하도록 한다. -->
 <c:forEach var="i" 
	begin="${requestScope.map.lvo.pagingBean.startPageOfPageGroup}"
	end="${requestScope.map.lvo.pagingBean.endPageOfPageGroup}"	> 
	<c:choose>
	<c:when test="${requestScope.map.lvo.pagingBean.nowPage!=i}">
		<a href="${pageContext.request.contextPath }/history.do?command=main&pageNo=${i}">${i}</a>
	</c:when>
	<c:otherwise>
		<u>${i}</u>
	</c:otherwise>
	</c:choose>
</c:forEach>	 
	&nbsp;&nbsp;	 

<!-- 다음 페이지 그룹이 있으면 화살표 이미지를 보여줘야 하지만 위 ajax 페이지와 통일성을 주기 위해 숫자로 표현하였다.
	이미지 링크는 현재 페이지 그룹의 마지막 번호 + 1 
	다음 그룹의 시작 페이지로 링크한다.
	right_arrow_btn.gif -->
<c:if test="${requestScope.map.lvo.pagingBean.nextPageGroup}">
	<a href="${pageContext.request.contextPath }/history.do?command=main&pageNo=${requestScope.map.lvo.pagingBean.endPageOfPageGroup+1}">
	${requestScope.map.lvo.pagingBean.endPageOfPageGroup+1}</a>
</c:if>	
</div>
</div> 